<template>
  <div class="app-container" v-loading="loading">
    <el-table
      :row-class-name="xxxTableRowClassName"
      v-loading="isLoading"
      :data="list"
      element-loading-text="Loading"
      :header-cell-style="{
        background: 'rgba(61,157,255,0.05)',
        color: '#333333',
      }"
      fit
      highlight-current-row
    >
      <template slot="empty">
        <span>暂无跟着练作业</span>
      </template>
      <!--      row-click 行点击事件-->
      <el-table-column
        align="center"
        prop="pfJobName"
        label="作业名称"
      ></el-table-column>
      <el-table-column align="center" prop="pfCheckStatus" label="审核状态">
        <template slot-scope="scope">
          <span
            :style="{
              color:
                scope.row.pfCheckStatus == 0
                  ? '#666'
                  : scope.row.pfCheckStatus == 1
                  ? '#1890FF'
                  : '#FF1818',
            }"
          >
            {{
              scope.row.pfCheckStatus == 0
                ? "待审核"
                : scope.row.pfCheckStatus == 1
                ? "通过"
                : "未通过"
            }}
          </span>
        </template></el-table-column
      >
      <el-table-column align="center" prop="created_at" label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            plain
            type="primary"
            @click="studentEdit($event, scope.row)"
            >审核</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <followThePracticeDialog
      @close="close"
      @submit="closeSuccess"
      :isEdit="isEdit"
      :item="item"
      :gradelist="gradelist"
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
    ></followThePracticeDialog>
    <pagination-page @size="changeSize" @page="changePage" :total="total" />
  </div>
</template>

<script>
import followThePracticeDialog from "@/views/platformaudit/followthepracticeaudit/component/followThePracticeDialog";
import {
  homeworkList,
  followWorkAuditList,
} from "@/api/followThePractice/index.js";
export default {
  data() {
    return {
      list: null,
      isLoading: false,
      loading: false,
      value: false,
      dialogVisible: false,
      item: {},
      gradelist: [],
      isEdit: false,
      model: {
        pageSize: 10,
        pageIndex: 1,
      },
      total: -1,
      studentMessage: {},
      classSource: [],
      isShowFile: false,
    };
  },
  components: {
    followThePracticeDialog,
  },
  created() {
    this.fetchData();
  },
  methods: {
    xxxTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    selectChange() {
      this.model.pageIndex = 1;
      this.fetchData();
    },
    downLoadStudentMessage() {
      exportExcelFun(
        {
          userId: this.$store.state.user.USER_INFO.id,
          classId: this.model.classId,
          schoolId: this.$store.state.user.USER_INFO.pscShId,
        },
        this.$store.state.user.TOKEN
      );
    },

    changeSize(size) {
      this.model.pageSize = size;
      this.fetchData();
    },
    closeSuccess() {
      this.model.pageIndex = 1;
      this.model.pageSize = 10;
      this.dialogVisible = false;
      this.fetchData();
    },
    changePage(page) {
      this.model.pageIndex = page;
      this.fetchData();
    },
    studentEdit(evt, row) {
      let target = evt.target;
      if (target.nodeName == "SPAN") {
        target = evt.target.parentNode;
      }
      target.blur();
      this.item = { ...row };
      this.isEdit = true;
      this.dialogVisible = true;
    },
    uploadFile(e) {
      this.isShowFile = true;
      this.$nextTick(() => {
        this.$refs.file.click();
      });
    },
    uploadTemplate() {
      let upload_file = this.$refs.file.files[0];
      const upload_file_name = upload_file.name.substring(
        upload_file.name.lastIndexOf(".") + 1
      );
      if (upload_file_name != "xls") {
        this.$message.error("只可以上传xls文件");
        return;
      }
      let formData = new FormData();
      formData.append("file", upload_file);
      formData.append("classId", this.model.classId);
      studentImport({ param: encryption(JSON.stringify(formData)) }).then(
        (response) => {
          if (response.code === 200) {
            this.fetchData();
          } else if (response.code === 401) {
            this.$router.replace("/");
            this.$message.error("您的身份信息已过期，请重新登录");
            sessionStorage.removeItem("userInfo");
            sessionStorage.removeItem("token");
            this.$store.commit("user/SET_TOKEN", "");
          } else {
            this.$message.error(response.message);
          }
        }
      );
      this.isShowFile = false;
    },
    increment() {
      this.item = {};
      this.dialogVisible = true;
    },
    close() {
      this.dialogVisible = false;
      this.item = {};
      this.isEdit = false;
    },
    async fetchData() {
      this.isLoading = true;
      const result = await followWorkAuditList({
        ...this.model,
        userId: this.$store.state.user.USER_INFO.id,
      });
      if (result.code === 200) {
        this.list = result.result.list;
        this.total = result.result.total;
      }
      this.isLoading = false;
    },
  },
};
</script>
<style scoped lang="scss">
.app-top {
  display: flex;
  justify-content: space-between;

  margin-bottom: 30px;
}
::v-deep .el-table__body-wrapper .statistics-warning-row {
  background: rgba(61, 157, 255, 0.05);
}
</style>
